<template>
  <view class="FridgeSetting-dialog" v-if="show">
    <Modal
      :visible="show"
      :title="currentGroup?.name"
      :wrapper-style="{ top: `50%`, maxHeight: 'none' }"
      :ok-text="$t('APP.Common.Close.Text')"
      @ok="confirmRename"
    >
      <view>
        <view class="show-view">
          <image :src="imageShowList[cunstomIndex]?.imageShow" mode="widthFix" class="show-image"></image>
          <view class="show-shaw" v-if="showModals">
            <text> {{ imageShowList[cunstomIndex]?.currentLocation }}</text>
            <text> {{ imageShowList[cunstomIndex]?.currentDate }}</text>
            <text> {{ imageShowList[cunstomIndex]?.currentTime }}</text>
          </view>
        </view>
        <view class="handle-box">
          <view class="handle-up" @click="changeCunstomIndex('')" :class="{ 'stop-deal': cunstomIndex === 0 }">
            <image src="@/static/Btn_Arrow_Down_n.png"></image>
          </view>
          <view
            class="handle-next"
            @click="changeCunstomIndex('add')"
            :class="{ 'stop-deal': cunstomIndex === imageShowList.length - 1 }"
          >
            <image src="@/static/Btn_Arrow_Down_n.png"></image>
          </view>
        </view>
      </view>
    </Modal>
  </view>
</template>
<script lang="ts" setup>
import { getImagesGroup, getImagesInfo } from '@/api/fridge'
import type { ImageList } from '@/api/fridge'
import { SETTING_DOOR } from '@/constants/Command'
import Modal from '@/common/modal.vue'
import type { FridgeFreezerController } from '@/controller/FridgeFreezer/definition'
const props = defineProps<{
  show: boolean
  control: FridgeFreezerController.Control
}>()
const emit = defineEmits<{
  (e: 'close'): void
}>()
watch(
  () => props.show,
  () => {
    if (props.show) {
      getImageList()
    }
  }
)
/**
 * 菜单设置项
 */
const isEnableCameras = computed(() => props.control.store.isEnableCameras)
const currentGroup = computed(() => props.control.store.currentSettingGroup)
const showModals = ref(false)
function confirmRename() {
  emit('close')
  clearData()
}
function clearData() {
  imageShowList.value = []
  cunstomIndex.value = 0
  loadingNum.value = 0
  imageList.value = []
  showModals.value = false
}
/**
 * 图片操作
 */
watch(
  () => isEnableCameras.value,
  () => {
    if (isEnableCameras.value) {
    }
  }
)
const imageList = ref<ImageList[]>([])
const imageShowList = ref<any[]>([])
const cunstomIndex = ref(0)
const loadingNum = ref(0)
function getImageList() {
  uni.showLoading({
    title: '图片加载中',
  })

  getImagesGroup(props.control.store._datasource.haId).then((res) => {
    if (res.code === 0) {
      imageList.value = res.data.images
      dealImageList()
    } else {
      uni.hideLoading()
    }
  })
}
function dealImageList() {
  imageList.value.sort((a, b) => {
    return a.timestamp < b.timestamp ? 1 : -1
  })

  imageList.value.map(async (items, index) => {
    if (index < 2) {
      if (items.key === SETTING_DOOR) {
        imageShowList.value[0] = {
          imageShow: await getImageShowList(items.imagekey),
          currentDate: switchDate(items.timestamp, 1),
          currentTime: switchDate(items.timestamp),
          currentLocation: items.key === SETTING_DOOR ? '冷藏室视角' : '冷藏室门视角',
        }
      } else {
        imageShowList.value[1] = {
          imageShow: await getImageShowList(items.imagekey),
          currentDate: switchDate(items.timestamp, 1),
          currentTime: switchDate(items.timestamp),
          currentLocation: items.key === SETTING_DOOR ? '冷藏室视角' : '冷藏室门视角',
        }
      }
    }
  })
}
function switchDate(timestamp: number | string, isDate?: number) {
  const date = new Date((timestamp as number) * 1000) // 根据时间戳创建Date对象
  const year = date.getFullYear() // 获取年份
  const currentYear = new Date().getFullYear()
  const month = date.getMonth() + 1 // 获取月份，需要加1
  const day = date.getDate() // 获取日期
  const hour = date.getHours() // 获取小时
  let minute: string | number = date.getMinutes() // 获取分钟
  minute = minute < 10 ? `0${minute}` : minute
  let second: string | number = date.getSeconds() // 获取秒数
  second = second < 10 ? `0${second}` : second

  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}` // 拼接成格式化后的日期字符串
  if (isDate === 1) {
    return currentYear === year ? `${month}-${day}` : `${year}-${month}-${day}`
  } else {
    return `${hour}:${minute}`
  }
}
async function getImageShowList(key: string) {
  return getImagesInfo(props.control.store._datasource.haId, key).then((res) => {
    let base64 = uni.arrayBufferToBase64(res as any)
    let url = 'data:image/png;base64,' + base64
    loadingNum.value++
    if (loadingNum.value === 2) {
      showModals.value = true
      uni.hideLoading()
    }
    return url
  })
}
function changeCunstomIndex(step?: string) {
  if (step === 'add') {
    cunstomIndex.value++
  } else {
    cunstomIndex.value--
  }
}
</script>
<style lang="less" scoped>
.FridgeSetting-dialog {
  .show-image {
    width: 100%;
  }
  .show-view {
    position: relative;
    .show-shaw {
      position: absolute;
      // opacity: 0.5;
      background-color: rgba(0, 0, 0, 0.5);
      bottom: 10rpx;
      width: 100%;
      height: 64rpx;
      display: flex;
      justify-content: center;
      color: #fff;
      align-items: center;
      & > text {
        margin-right: 24rpx;
      }
    }
  }
  .handle-box {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 50rpx;
    align-items: center;
    & > view {
      width: 24rpx;
      height: 24rpx;
      padding: 24rpx;
      & > image {
        width: 100%;
        height: 24rpx;
        display: block;
      }
    }
    .handle-up {
      transform: rotateZ(180deg);
      margin-right: 80rpx;
    }
  }
  .stop-deal {
    pointer-events: none;
    opacity: 0.4;
  }
}
</style>
